<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>日报管理系统</title>
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="/static/paper/styles/index.css"/>
    <style>
        /* 全局样式 */
        body {
            background-color: #f5f5f5; /* 设置全局背景为灰色 */
            margin: 0; /* 去掉默认的 body 外边距 */
            padding: 0; /* 去掉默认的 body 内边距 */
            height: 100vh; /* 使 body 高度占满视窗 */
            overflow: hidden; /* 防止 body 滚动 */
        }

        .container {
            background-color: white; /* 内容区域背景为白色 */
            margin: 20px; /* 四周的间距 */
            padding: 20px; /* 内容区域内边距 */
            border-radius: 8px; /* 给内容区域添加圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 给内容区域添加阴影 */
            height: calc(100% - 90px); /* 使白色区域高度占满屏幕，减去边距 */
            overflow: auto; /* 允许内部滚动 */
        }

        .dashboard-container {
            display: flex;
            flex-direction: column; /* 使内容垂直排列 */
            gap: 20px; /* 在行之间添加间距 */
        }

        .layout-container {
            display: flex;
            flex: 1; /* 使子元素占满可用空间 */
            justify-content: space-between; /* 使内容左右分布 */
            align-items: flex-start; /* 垂直对齐到顶部 */
        }

        .zgs-card-div {
            flex: 1; /* 使未提交人员的卡片占满剩余空间 */
            margin-right: 20px; /* 右侧留出空间给进度条卡片 */
        }

        .zgs-progress-div {
            width: 300px; /* 固定宽度 */
        }

        .calendar-div {
            margin-top: 20px; /* 为日历卡片添加顶部间距 */
        }

        .chart-container {
            width: 800px; /* 使图表占满容器 */
            height: 460px; /* 设置图表高度 */
        }

    </style>
</head>
<body>
<div class="container"> <!-- 使用外层容器 -->
    <div class="dashboard-container" id="home-app">

        <!-- 第一行：未提交人员和环形进度条 -->
        <div class="layout-container">
            <div class="zgs-card-div">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="display: flex; align-items: center;">
                        <div style="flex-grow: 1;"> <!-- 使这个 div 占据剩余空间 -->
                            <el-tag v-if="isRestDay" type="info" style="margin-right: 10px;">休息</el-tag>
                            <span v-else>未提交人员({{ unsubmittedCount }})</span>
                        </div>
                        <el-button type="primary" class="blue-button" @click="open">更新</el-button>
                    </div>
                    <div style="display: inline-block; height: auto; line-height: 40px;">
                        <el-tag style="background-color: #ffeeba; color: #333;">职工</el-tag>
                        <span v-for="item in noSubData.employee" :key="item.id" class="text item">
                        <a :href="'../category/particular.html?em_id=' + item.id"
                           style="text-decoration: none; color: inherit;"
                           onmouseover="this.style.textDecoration='underline';"
                           onmouseout="this.style.textDecoration='none';">
                            {{ item.name }}
                        </a>
                    </span>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: inline-block; height: auto; line-height: 40px;">
                        <el-tag style="background-color: #cce5ff; color: #333;">学生</el-tag>
                        <span v-for="item in noSubData.student" :key="item.id" class="text item">
                        <a :href="'../category/particular.html?em_id=' + item.id"
                           style="text-decoration: none; color: inherit;"
                           onmouseover="this.style.textDecoration='underline';"
                           onmouseout="this.style.textDecoration='none';">
                            {{ item.name }}
                        </a>
                    </span>
                    </div>
                </el-card>
            </div>

            <!-- 环形进度条部分 -->
            <div class="item zgs-progress-div">
                <el-card class="box-card" style="width: 270px;"> <!-- 为进度条添加卡片 -->
                    <div slot="header" class="clearfix" align="center">
                        <el-date-picker
                                v-model="selectedDate"
                                type="date"
                                placeholder="选择日期"
                                @change="onDateChange"
                                style="width: 150px; height: 30px"
                        >
                        </el-date-picker>
                    </div>
                    <div style="display: flex; justify-content: center; align-items: center; height: 140px;">
                        <!-- 使用 Flexbox 使内容居中 -->
                        <el-progress type="circle" :percentage="submissionRate" :width="140"
                                     :color="getProgressColor(submissionRate)"></el-progress>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 第二行：柱状图和请假列表 -->
        <div class="layout-container">
            <!-- 柱状图卡片 -->
            <el-card class="box-card" style="width: 900px; height: 500px"> <!-- 添加柱状图卡片 -->
                <div id="barChart" class="chart-container"></div> <!-- 柱状图容器 -->
            </el-card>

            <!-- 请假列表卡片 -->
            <el-card class="box-card" style="width: 400px; height: 500px"> <!-- 添加请假列表卡片 -->
                <div style="padding: 20px; text-align: center;">
                    <span>这里是请假列表内容(制作中)</span> <!-- 这里可以插入请假列表的内容 -->
                </div>
            </el-card>
        </div>

    </div>
</div>

<!--syh-->
<script src="/static/paper/plugins/vue/vue.js"></script>
<script src="/static/paper/plugins/element-ui/index.js"></script>
<script src="/static/paper/plugins/axios/axios.min.js"></script>
<script src="/static/paper/plugins/echarts/echarts.min.js"></script>

<script>
    new Vue({
        el: '#home-app',
        data() {
            return {
                initialDate: this.getYesterdayDate(), // 初始日期为昨天
                selectedDate: '', // 选择的日期
                noSubData: {
                    employee: [], // 存放未交的职工
                    student: []  // 存放未交的学生
                },
                unsubmittedCount: '', // 未提交数目
                submissionRate: 0, // 提交率
                isRestDay: false, // 是否为休息日
                restDayMessage: '',
                barChart: null // 用于存放 ECharts 实例
            }
        },
        created() {
            this.selectedDate = this.initialDate; // 初始化时将选定日期设置为初始日期
            this.fetchData(); // 初始化时获取数据
            this.renderBarChart();
        },
        methods: {
            getYesterdayDate() {
                const date = new Date();
                date.setDate(date.getDate() - 1); // 设置为前一天
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
                const day = String(date.getDate()).padStart(2, '0'); // 补零
                return `${year}-${month}-${day}`; // 返回格式化后的字符串
            },
            getProgressColor(value) {
                if (value === 100) return '#31aa74'; // 绿色
                if (value >= 70) return '#FEA443'; // 橙色
                if (value >= 50) return '#881400'; // 红色
                return '#A9ACB2'; // 灰色
            },
            onDateChange(date) {
                // 将选择的日期格式化为 YYYY-MM-DD
                console.log("onDateChange下打印date/上", date)
                this.selectedDate = date.toLocaleDateString('en-CA');
                console.log("onDateChange下打印date/下", this.selectedDate)
                this.fetchData(); // 选择日期后立即获取数据
            },
            fetchData() {
                const date = this.selectedDate;
                if (!date) return; // 如果没有选择日期，则不进行请求
                console.log("打印date:", date);
                // 清空旧数据
                this.noSubData.employee = []; // 清空未提交的职工名单
                this.noSubData.student = []; // 清空未提交的学生名单
                this.unsubmittedCount = ''; // 清空提交数目
                this.submissionRate = 0; // 清空提交率
                this.isRestDay = false; // 重置是否为休息日的状态
                this.restDayMessage = ''; // 清空休息日消息
                axios.post('/daypaper/submission_rate', {date})
                    .then(({data: res}) => { // 将 data 重命名为 res
                        if (res.status === "success") {
                            const responseData = res.data; // 提取实际的数据部分
                            if (responseData) {
                                this.unsubmittedCount = responseData["未提交数目"]; // 提交数目
                                this.submissionRate = parseInt(responseData["提交率"]); // 提交率，省略小数点
                                console.log('打印提交率', this.submissionRate)
                                this.noSubData.employee = responseData["未提交名单"]["职工"].ids.map((id, index) => ({
                                    id: id,
                                    name: responseData["未提交名单"]["职工"].names[index]
                                }));

                                this.noSubData.student = responseData["未提交名单"]["学生"].ids.map((id, index) => ({
                                    id: id,
                                    name: responseData["未提交名单"]["学生"].names[index]
                                }));
                                console.log("打印nosubdata:", this.noSubData)
                                this.isRestDay = false; // 如果有数据，设置为非休息日
                            } else {
                                this.isRestDay = true; // 如果没有数据，设置为休息日
                                this.restDayMessage = res.msg; // 保存后端传来的消息
                            }
                        } else {
                            this.$notify.warning({
                                title: '警告',
                                message: res.msg,
                                offset: 50
                            });
                        }
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            open() {
                this.$alert('若缺失日报数据或当日员工已补交，可手动更新', '更新日报', {
                    confirmButtonText: '更新',
                    callback: action => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '日报更新中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                            this.updateDaypaper(loading); // 调用更新日报的方法
                            // loading.close()  //关闭指示器
                        } else {
                            this.$message.warning({
                                showClose: true,
                                message: "已取消"
                            })
                        }
                    }
                });
            },
            updateDaypaper(loading) {
                // 发送 GET 请求
                fetch('/daypaper/update_daypaper', {
                    method: 'POST', // 设置请求方法为 POST
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头为表单数据
                    },
                    body: new URLSearchParams({}) // 发送空的表单数据
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不成功');
                        }
                        return response.json(); // 假设服务器返回 JSON 数据
                    })
                    .then(data => {
                        // 根据返回的数据更新状态或显示消息
                        if (data.status === 'success') {
                            this.$notify.success({
                                title: "更新成功",
                                message: data.msg
                            });
                            console.log(data); // 打印返回的数据，供调试使用
                            this.fetchData(); // 选择日期后立即获取数据
                        } else {
                            this.$message.error({
                                message: data.msg
                            })
                        }

                    })
                    .catch(error => {
                        this.$message({
                            type: 'error',
                            message: `更新日报失败: ${error.message}`
                        });
                    })
                    .finally(() => {
                        loading.close(); // 关闭加载指示器
                    });
            },
            renderBarChart() {
                // 从后端获取数据
                axios.get('/daypaper/bar_graph')
                    .then(({data: res}) => {
                        console.log("API Response:", res); // 打印整个响应以调试
                        if (res.status === "success") {
                            const data = res.data; // 提取实际的数据部分
                            const chartData = data; // 直接使用 data 作为 chartData

                            // 检查 chartData 是否存在
                            if (!chartData || !Array.isArray(chartData)) {
                                console.error("chartData is undefined or not an array:", chartData);
                                return; // 退出渲染逻辑
                            }

                            // 打印 chartData 以确认格式
                            console.log("Chart Data:", chartData);

                            if (this.barChart) {
                                this.barChart.dispose(); // 如果存在实例，先销毁
                            }
                            this.barChart = echarts.init(document.getElementById('barChart')); // 初始化 ECharts 实例

                            const barOption = {
                                title: {
                                    text: '提交情况'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: function (params) {
                                        const index = params.dataIndex; // 获取当前柱的索引
                                        const noSubData = chartData[index].未提交名单;
                                        const students = noSubData.学生.join(', ');
                                        const employees = noSubData.职工.join(', ');
                                        return `
                                <strong>${chartData[index].日期}</strong><br/>
                                提交人数: ${chartData[index].提交数}<br/>
                                应提交数: ${chartData[index].应提交数}<br/>
                                未提交职工: ${employees || '无'}<br/>
                                未提交学生: ${students || '无'}
                            `;
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    data: chartData.map(item => item.日期) // X 轴标签
                                },
                                yAxis: {
                                    type: 'value',
                                    max: Math.max(...chartData.map(item => item.应提交数)) // 根据应提交数设置 Y 轴最大值
                                },
                                series: [
                                    {
                                        name: '背景',
                                        type: 'bar',
                                        data: chartData.map(item => item.应提交数), // 所有柱子的最大值
                                        itemStyle: {
                                            color: '#e0e0e0' // 灰色作为背景框架
                                        },
                                        barGap: '-100%', // 确保背景柱子与实际柱子重叠
                                        barWidth: 50, // 设置柱子的宽度
                                        silent: true // 禁止鼠标事件
                                    },
                                    {
                                        name: '提交人数',
                                        type: 'bar',
                                        data: chartData.map(item => item.提交数), // 实际提交人数
                                        itemStyle: {
                                            color: '#67c23a' // 设置柱状图颜色
                                        },
                                        label: {
                                            show: true, // 显示柱高
                                            position: 'top', // 标签位置在柱子顶部
                                            formatter: '{c}' // 显示具体数值
                                        },
                                        barWidth: 50 // 设置柱子的宽度
                                    }
                                ]
                            };
                            console.log("ECharts option:", barOption); // 打印 ECharts 配置
                            this.barChart.setOption(barOption); // 使用刚指定的配置项和数据显示图表
                            this.barChart.resize(); // 调整图表尺寸
                        } else {
                            console.error('数据获取失败:', res.msg);
                        }
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            }
        }
    });
</script>
</body>
</html>
